<template>
	<div v-loading="data.mtloading">
		<el-table :data="data.langlist" :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }" class="w-full">
			<el-table-column prop="lang" :label="$t('machine.configs.langCode')">
				<template #default="scope">
					{{ scope.row.lang || '--' }}
				</template>
			</el-table-column>
			<el-table-column prop="name" :label="$t('machine.types.country')">
				<template #default="scope">
					{{ scope.row.name || '--' }}
				</template>
			</el-table-column>
			<el-table-column prop="mg_name" :label="$t('machine.types.name')">
				<template #default="scope">
					{{ scope.row.mg_name || '--' }}
				</template>
			</el-table-column>
			<el-table-column prop="desc" :label="$t('machine.types.groupDesc')">
				<template #default="scope">
					{{ scope.row.desc || '--' }}
				</template>
			</el-table-column>
			<el-table-column prop="g_name" :label="$t('public.operate')">
				<template #default="scope">
					<el-button type="primary" size="small" @click="edit(scope.row)">
						{{ $t('public.modify') }}
					</el-button>
					<el-button v-if="scope.row.mgl_id != undefined" type="danger" size="small" @click="del(scope.mgl_id)">
						{{ $t('public.del') }}
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-dialog v-model="data.dialogVisible" :title="$t('machine.types.GroupLang')" center width="30%" style="margin-top: 80px;">
			<el-form v-if="data.dialogVisible" :model="data.obj" :rules="data.rules" :label-width="language == 'en' ? '110px' : '100px'" ref="ruleFormRef">
				<el-form-item :label="$t('machine.types.name') + ':'" prop="mg_name">
					<el-input v-model="data.obj.mg_name" :placeholder="$t('message.pleaseEnter')" />
				</el-form-item>
				<el-form-item :label="$t('machine.types.groupDesc') + ':'" prop="desc">
					<el-input v-model="data.obj.desc" :placeholder="$t('message.pleaseEnter')" />
				</el-form-item>
				<div class="w-full text-center">
					<div class="inline-block">
						<el-button type="primary" size="small" @click="submit(ruleFormRef)">
							<template #default>
								<span class="text-sm">{{ $t('public.save') }}</span>
							</template>
						</el-button>
						<el-button size="small" @click="data.dialogVisible = false">
							<template #default>
								<span class="text-sm">{{ $t('public.cancel') }}</span>
							</template>
						</el-button>
					</div>
				</div>
			</el-form>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t: $t } = useI18n()
import { getListgrouplang, addgrouplang, updategrouplang, delgrouplang } from '@/api/machine_type';
import {onMounted} from 'vue'
let language = ref()
const { locale } = useI18n()
onMounted(() => {
	language.value = locale.value
})
let ruleFormRef = ref<any>();
let props = defineProps({
	info: {
		type: Object,
		default: {}
	},

	lang: {
		type: Array,
		default: []
	}
})

let data = reactive({
	mtloading: false, // 加载
	dialogVisible: false, // 弹窗
	langlist: [], // 列表信息
	obj: {}, // 选中的分组
	rules: { // 表单验证
		mg_name: { required: true, message: $t('message.pleaseEnter'), trigger: 'blur' },
	},
})

// 获取列表信息
let setlang = () => {
	let info = props.info
	let lang = props.lang
	data.langlist = []
	for (let item of lang) {
		data.langlist.push({
			name: item.name,
			mg_id: info.mg_id,
			mg_name: '',
			desc: '',
			lang: item.lang
		})
	}
	data.mtloading = true
	getListgrouplang({ mg_id: info.mg_id }).then(res => {
		data.mtloading = false
		if (res.state == 200) {
			for (let item of res.data) {
				for (let ime of data.langlist) {
					if (item.lang == ime.lang) {
						ime.mgl_id = item.mgl_id
						ime.mg_name = item.mg_name
						ime.desc = item.desc
					}
				}
			}
		}
	}).catch(err => {
		data.mtloading = false
	})
}

// 添加/修改分组
let edit = (e) => {
	data.dialogVisible = true
	data.obj = {
		desc: e.desc,
		lang: e.lang,
		mg_id: e.mg_id,
		mg_name: e.mg_name,
		name: e.name
	}
	if (e.mgl_id != undefined) {
		data.obj.mgl_id = e.mgl_id
	}
}

// 提交数据
let submit = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate((valid, fields) => {
		if (valid) {
			let langobj = {
				mg_name: data.obj.mg_name,
				desc: data.obj.desc,
				lang: data.obj.lang,
			}
			if (data.obj.mgl_id == undefined) {
				// 添加分组
				langobj.mg_id = data.obj.mg_id
				addgrouplang(langobj).then(res => {
					if (res.state == 200) {
						ElMessage({
							message: $t('message.addSuccess'),
							type: 'success'
						})
						data.dialogVisible = false
						setlang()
						return
					}
					ElMessage({
						message: $t('message.networkFailed'),
						type: 'error'
					})
				})
			} else {
				// 修改分账
				langobj.mgl_id = data.obj.mgl_id
				updategrouplang(langobj).then(res => {
					if (res.state == 200) {
						ElMessage({
							message: $t('message.modifySuccess'),
							type: 'success'
						})
						data.dialogVisible = false
						setlang()
						return
					}
					ElMessage({
						message: $t('message.networkFailed'),
						type: 'error'
					})
				})
			}
		}
	})
}

// 删除分组
let del = (e) => {
	ElMessageBox.confirm($t('message.delDatas'))
		.then(res => {
			delgrouplang({ mgl_id: e }).then(res => {
				if (res.state == 200) {
					ElMessage({
						message: $t('message.delSuccess'),
						type: 'success'
					})
					data.dialogVisible = false
					setlang()
					return
				}
				ElMessage({
					message: $t('message.networkFailed'),
					type: 'error'
				})
			})
		}).catch(err => {
			console.log('取消')
		})
}

setlang()

</script>
